require('../../assets/css/index.less')
require('../../assets/fonts/iconfont.css')
require('../../lib/weui/weui.css');
require("./rundata.less")
let weui = require('../../lib/weui/weui.js');
import * as echarts from 'echarts';
const dom = require('../../utils/dom');
const https = require('../../utils/https');
const local = require('../../utils/local');

dom.ready(function() {

    function tabulation(obj, option) {
        let myChart = echarts.init(dom.gete(obj))

        myChart.setOption(
            option
        );
    }


    https.get("/api/exercise", function(res) {

        let { errno, data } = res;
        console.log(res);

        if (errno == 0) {
            let date = data.days.map(v => {
                return v.date;
            });
            let sumCalorie = data.days.map(v => {
                return v.sumCalorie
            });
            let type = data.days.map(v => {
                return v.exerciseData.map(x => {
                    return x.duration
                })
            })
            let sumDuration = data.days.map(v => {
                return v.sumDuration
            })
            let sumMeter = data.days.map(v => {
                return v.sumMeter
            })
            let count = data.days.map(v => {
                return v.count
            })



            let option = {
                title: {
                    text: '最近7天运动时长'
                },
                xAxis: {
                    type: 'category',
                    data: date,
                    axisLabel: {
                        // interval: 0,
                        rotate: 45
                    },
                    axisTick: {
                        //x轴刻度相关设置
                        alignWithLabel: true,
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: sumCalorie,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            };
            let option1 = {
                backgroundColor: '#ccc',
                title: {
                    text: '运动分类',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    show: false,
                    min: 80,
                    max: 600,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        { value: type[0][0], name: '跑步' },
                        { value: type[0][1], name: '骑行' },
                        { value: type[0][2], name: '训练' },

                    ].sort(function(a, b) {
                        return a.value - b.value;
                    }),
                    roseType: 'radius',
                    label: {
                        color: 'rgba(255, 255, 255, 0.5)'
                    },
                    labelLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.5)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    },
                    itemStyle: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function(idx) {
                        return Math.random() * 200;
                    }
                }]
            };
            let option2 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: date
                },
                series: [{
                        name: '跑步',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: sumDuration
                    },
                    {
                        name: '骑行',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: sumMeter
                    },
                    {
                        name: '训练',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: sumCalorie
                    },
                    // {
                    //   name: 'Video Ad',
                    //   type: 'bar',
                    //   stack: 'total',
                    //   label: {
                    //     show: true
                    //   },
                    //   emphasis: {
                    //     focus: 'series'
                    //   },
                    //   data: [150, 212, 201, 154, 190, 330, 410]
                    // },
                    // {
                    //   name: 'Search Engine',
                    //   type: 'bar',
                    //   stack: 'total',
                    //   label: {
                    //     show: true
                    //   },
                    //   emphasis: {
                    //     focus: 'series'
                    //   },
                    //   data: [820, 832, 901, 934, 1290, 1330, 1320]
                    // }
                ]
            };
            let option3 = {
                xAxis: {
                    type: 'category',
                    data: date,
                    axisLabel: {
                        // interval: 0,
                        rotate: 45
                    },
                    axisTick: {
                        //x轴刻度相关设置
                        alignWithLabel: true,
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: count,
                    type: 'line'
                }]
            };
            tabulation(".items", option);
            tabulation(".items1", option1);
            tabulation(".items2", option2);
            tabulation(".items3", option3);
        }
    })

    dom.addevent('.iconfont', function() {
        history.go(-1);
    })
})